<template>
  <div class="gtp">
    <div class="c_top">
      <div class="left-nav">
        <div class="optionShow">
          <el-button
            id="optionShow"
            type="text"
            icon="el-icon-guide"
            @click="centerDialogVisible = true"
          >操作说明</el-button>
        </div>
        <el-dialog title="步骤介绍" :visible.sync="centerDialogVisible" width="30%">
          <p>1、点击按钮，实现模型的俯视、平视和斜视间的转换；</p>
          <p>2、输入任何数字，实现三维地层模型的高度变化；</p>
          <p>3、通过下拉框选择层数，展示不同地层数的地层模型；</p>
          <p>4、通过单选按钮，展示不同土地类型的地层模型；</p>
          <p>5、通过选择颜色，点击提交按钮，改变各种土地类型的模型颜色；</p>
          <p>6、点击模型的任意位置，查询地层模型的岩性信息和地层信息；</p>
          <p>7、点击空间距离按钮，在地层模型上绘制线段并计算线段的空间距离。</p>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <div class="optionShow">
          <el-button id="optionShow" type="text" icon="el-icon-setting">主要功能</el-button>
        </div>
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>1、</strong>视点控制
          </el-button>
        </div>
        <!--斜视，俯视，平视-->
        <div>
          <button style="margin-top:15px;" id="overlook" @click="fushi">俯视</button>
          <button style="margin-top:15px;" id="head-up" @click="pingshi">平视</button>
          <button style="margin-top:15px;" id="incline" @click="xieshi">斜视</button>
        </div>
        <!--拔高系数-->
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>2、</strong>拔高系数
          </el-button>
        </div>
        <div style="margin-top:15px;">
          <input id="height" type="text" value="1.0" />
          <button id="change-height" @click="changeHeight">提交</button>
        </div>
        <!--分层展示-->
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>3、</strong>分层展示
          </el-button>
        </div>
        <div class="fenCeng">
          <div class="chance">
            第
            <select id="dcnumForm">
              <option selected>1</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
            </select>
            层&nbsp;&nbsp;到
            第
            <select id="dcnumTo">
              <option selected>22</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
            </select>
            层
          </div>
          <button id="dcnum-data" @click="dcnumData">提交</button>
        </div>
        <!--分类展示-->
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>4、</strong>分类展示
          </el-button>
        </div>
        <div class="fenlei">
          <label>
            <input id="sid1" type="checkbox" checked />填土, 素填土
          </label>
          <label>
            <input id="sid2" type="checkbox" checked />黄土
          </label>
          <label>
            <input id="sid3" type="checkbox" checked />古土壤
          </label>
          <label>
            <input id="sid4" type="checkbox" checked />粉质粘土, 粉细砂
          </label>
          <label>
            <input id="sid5" type="checkbox" checked />卵石
          </label>
          <label>
            <input id="sid6" type="checkbox" checked />圆砾, 砾砂
          </label>
          <label>
            <input id="sid7" type="checkbox" checked />中粗砂
          </label>
          <button id="dctype-data" @click="dctypeData">提交</button>
        </div>
        <!--岩性着色-->
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>5、</strong>岩性着色
          </el-button>
        </div>
        <div class="lithology">
          <label for="color-1">
            填土, 素填土:
            <input id="color-1" type="color" value="#FF7F00" />
          </label>
          <label for="color-2">
            黄土：
            <input id="color-2" type="color" value="#FFEC8B" />
          </label>
          <label for="color-3">
            古土壤:
            <input id="color-3" type="color" value="#8B7355" />
          </label>
          <label for="color-4">
            粉质粘土, 粉细砂：
            <input id="color-4" type="color" value="#EEDC82" />
          </label>
          <label for="color-5">
            卵石:
            <input id="color-5" type="color" value="#96CDCD" />
          </label>
          <label for="color-6">
            圆砾, 砾砂：
            <input id="color-6" type="color" value="#4682B4" />
          </label>
          <label for="color-7">
            中粗砂:
            <input id="color-7" type="color" value="#00CD00" />
          </label>

          <button id="color-change" @click="colorChange">提交</button>
        </div>

        <!--岩性查询-->
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>6、</strong>岩性查询
          </el-button>
        </div>
        <div>
          <button id="soil-query" @click="soilQuery" style="margin-top:15px;">岩性查询</button>
          <button id="stop-query" @click="stopQuery" style="margin-top:15px;">停止查询</button>
        </div>

        <!--空间量算-->
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>7、</strong>距离量算
          </el-button>
        </div>
        <div>
          <div id="distance-show" style="font-size:14px;margin:15px 0;">量算结果：0米</div>
          <button id="distance" @click="distance">空间距离</button>
          <button id="shut-distance" @click="shutDistance">关闭量算</button>
        </div>
      </div>

      <div
        id="WebGL-output"
        class="webgl"
        v-loading="loading"
        element-loading-text="模型加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></div>
    </div>

    <div class="guid">
      <div class="guidBar">
        <el-button icon="el-icon-arrow-left" plain @click="previous">上一页</el-button>
        <el-button plain @click="nextStep">
          下一页
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import TrackballControls from "three/examples/js/controls/TrackballControls.js";
import * as THREE from "three/build/three.js";
import { SceneUtils } from "three/examples/js/utils/SceneUtils.js";
import "three/examples/js/geometries/ConvexGeometry.js";
import { Notification } from "element-ui";
export default {
  name: "gtp",
  data() {
    return {
      centerDialogVisible: true,
      gtpoints: [],
      color1: "#FF7F00",
      color2: "#FFEC8B",
      color3: "#8B7355",
      color4: "#EEDC82",
      color5: "#96CDCD",
      color6: "#4682B4",
      color7: "#00CD00",
      intersect0x_color: null,
      clock: null,
      scene: null,
      webGLRenderer: null,
      width: "",
      height: "",
      camera: null,
      INTERSECTED: null,
      controls: null,
      h: 1.0,
      GTPGeometry: null,
      material: null,
      form: "",
      to: "",
      pointsArray: [],
      compotedDistance: 0,
      toTalDistance: 0,
      loading: false,
      x0: 0,
      y0: 4000,
      z0: 2250,
      x1: 0,
      y1: 0,
      z1: 1
    };
  },
  methods: {
    fushi() {
      this.h = 1.0;
      this.x0 = 0;
      this.y0 = 0;
      this.z0 = 4500;
      this.x1 = 0;
      this.y1 = 1;
      this.z1 = 0;
      document.getElementById("WebGL-output").innerHTML = "";
      this.init();
    },
    pingshi() {
      this.h = 1.0;
      this.x0 = 0;
      this.y0 = -5000;
      this.z0 = 0;
      this.x1 = 0;
      this.y1 = 0;
      this.z1 = 1;
      document.getElementById("WebGL-output").innerHTML = "";
      this.init();
    },
    xieshi() {
      this.h = 1.0;
      this.x0 = 0;
      this.y0 = 4000;
      this.z0 = 2250;
      this.x1 = 0;
      this.y1 = 0;
      this.z1 = 1;
      document.getElementById("WebGL-output").innerHTML = "";
      this.init();
    },
    init() {
      let container = document.getElementById("WebGL-output");
      this.width = container.clientWidth;
      this.height = container.clientHeight;
      this.camera = new THREE.PerspectiveCamera(
        60,
        this.width / this.height,
        100,
        12000
      );
      this.camera.position.x = this.x0;
      this.camera.position.y = this.y0;
      this.camera.position.z = this.z0;
      this.camera.lookAt(new THREE.Vector3(0, 0, 0));
      this.camera.up.x = this.x1;
      this.camera.up.y = this.y1;
      this.camera.up.z = this.z1;
      this.clock = new THREE.Clock();
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xebebeb);
      this.webGLRenderer = new THREE.WebGLRenderer({
        antialias: true
      });
      this.webGLRenderer.setSize(this.width, this.height);
      this.controls = new THREE.TrackballControls(this.camera, container);
      this.controls.rotateSpeed = 1.0; // 旋转速度
      this.controls.zoomSpeed = 1.5; // 缩放速度
      this.controls.panSpeed = 1.0; // 平移速度
      this.controls.staticMoving = true; // false为静止移动，true则没有惯性
      this.controls.dynamicDampingFactor = 0.3;
      container.appendChild(this.webGLRenderer.domElement);
      for (let i in this.gtpoints) {
        var gtpoint = this.gtpoints[i];

        var vertices = new Float32Array([
          gtpoint.x1 - 2245,
          gtpoint.y1 - 1845,
          (gtpoint.z1 - 382) * this.h,
          gtpoint.x2 - 2245,
          gtpoint.y2 - 1845,
          (gtpoint.z2 - 382) * this.h,
          gtpoint.x3 - 2245,
          gtpoint.y3 - 1845,
          (gtpoint.z3 - 382) * this.h,
          gtpoint.x4 - 2245,
          gtpoint.y4 - 1845,
          (gtpoint.z4 - 382) * this.h,
          gtpoint.x5 - 2245,
          gtpoint.y5 - 1845,
          (gtpoint.z5 - 382) * this.h,
          gtpoint.x6 - 2245,
          gtpoint.y6 - 1845,
          (gtpoint.z6 - 382) * this.h
        ]);
        var indexes = new Uint16Array([
          0,
          1,
          2,
          3,
          4,
          5,
          0,
          1,
          3,
          1,
          3,
          4,
          1,
          2,
          4,
          2,
          4,
          5,
          0,
          2,
          3,
          2,
          3,
          5
        ]);

        this.GTPGeometry = new THREE.BufferGeometry();
        this.GTPGeometry.addAttribute(
          "position",
          new THREE.BufferAttribute(vertices, 3)
        );
        //添加土地类型属性
        this.GTPGeometry.addAttribute(
          "soil",
          new THREE.BufferAttribute(gtpoint.sid, 1)
        );
        //添加土地层数属性
        this.GTPGeometry.addAttribute(
          "dcnum",
          new THREE.BufferAttribute(gtpoint.dcnum, 1)
        );

        // 索引数据赋值给几何体的index属性
        this.GTPGeometry.index = new THREE.BufferAttribute(indexes, 1);

        if (gtpoint.sid == 1) {
          this.material = new THREE.MeshBasicMaterial({
            color: this.color1, //三角面颜色
            side: THREE.DoubleSide //两面可见
          });
        }
        if (gtpoint.sid == 2) {
          this.material = new THREE.MeshBasicMaterial({
            color: this.color2,
            side: THREE.DoubleSide
          });
        }
        if (gtpoint.sid == 3) {
          this.material = new THREE.MeshBasicMaterial({
            color: this.color3,
            side: THREE.DoubleSide
          });
        }
        if (gtpoint.sid == 4) {
          this.material = new THREE.MeshBasicMaterial({
            color: this.color4,
            side: THREE.DoubleSide
          });
        }
        if (gtpoint.sid == 5) {
          this.material = new THREE.MeshBasicMaterial({
            color: this.color5,
            side: THREE.DoubleSide
          });
        }
        if (gtpoint.sid == 6) {
          this.material = new THREE.MeshBasicMaterial({
            color: this.color6,
            side: THREE.DoubleSide
          });
        }
        if (gtpoint.sid == 7) {
          this.material = new THREE.MeshBasicMaterial({
            color: this.color7,
            side: THREE.DoubleSide
          });
        }
        //线框材质
        var wireFrameMat = new THREE.MeshBasicMaterial();
        wireFrameMat.wireframe = true;
        //新建一个多材质
        var GTPMesh = THREE.SceneUtils.createMultiMaterialObject(
          this.GTPGeometry,
          [this.material, wireFrameMat]
        ); //var GTPMesh = new THREE.Mesh(GTPGeometry, material);
        this.scene.add(GTPMesh);
      }
      this.render();
      //添加window窗口调整监听事件
      window.addEventListener("resize", this.onWindowResize, false);
    },
    render() {
      var delta = this.clock.getDelta();
      this.controls.update(delta);
      requestAnimationFrame(this.render);
      this.webGLRenderer.render(this.scene, this.camera);
    },
    onWindowResize() {
      this.camera.aspect = this.width / this.height;
      //更新相机的投影矩阵
      this.camera.updateProjectionMatrix();
      this.webGLRenderer.setSize(this.width, this.height);
      this.controls.handleResize();
      this.render();
    },
    onMouseClick(event) {
      //与事件关联的默认动作(如果存在这样的动作)
      event.preventDefault();
      let container = document.getElementById("WebGL-output");
      // 屏幕坐标转标准设备坐标
      var x =
        (event.clientX - container.getBoundingClientRect().left) /
          container.offsetWidth *
          2 -
        1; // 标准设备横坐标
      // 这里的container是个dom元素,getBoundingClientRectangle会返回当前元素的视口大小.
      var y =
        -(
          (event.clientY - container.getBoundingClientRect().top) /
          container.offsetHeight
        ) *
          2 +
        1; // 标准设备纵坐标
      // 标准设备坐标
      var standardVector = new THREE.Vector3(x, y, 1);
      // 标准设备坐标转世界坐标
      var worldVector = standardVector.unproject(this.camera);
      // 射线投射方向单位向量(worldVector坐标减相机位置坐标)
      var ray = worldVector.sub(this.camera.position).normalize();
      // 创建射线投射器对象
      var rayCaster = new THREE.Raycaster(this.camera.position, ray);
      // 返回射线选中的对象 第二个参数如果不填 默认是false
      var intersects = rayCaster.intersectObjects(this.scene.children, true);

      if (intersects.length > 0) {
        var object = intersects[0].object;
        //console.log(object.geometry.attributes.soil.array);
        //console.log(intersects[0].point.x);
        if (this.INTERSECTED !== object) {
          if (this.INTERSECTED)
            "this.INTERSECTED." +
              "(" +
              this.material +
              ")" +
              ".color.set(this.intersect_color)";
          this.INTERSECTED = object;
          //获取颜色值
          this.intersect_color =
            "object." + "(" + this.material + ")+" + ".color.getHex()";
          "this.INTERSECTED." +
            "(" +
            this.material +
            ")" +
            ".color.set(0xff0000)"; //红色
        }
        var sid = object.geometry.attributes.soil.array;
        var dcnum = object.geometry.attributes.dcnum.array;

        if (sid == 1)
          window.setTimeout(function() {
            alert("土地类型: 填土, 素填土。" + "土地层数：第" + dcnum + "层");
          }, 100); //延时0.1秒弹出，alert()会阻断进程
        if (sid == 2)
          window.setTimeout(function() {
            alert("土地类型: 黄土。" + "土地层数：第" + dcnum + "层");
          }, 100);
        if (sid == 3)
          window.setTimeout(function() {
            alert("土地类型: 古土壤。" + "土地层数：第" + dcnum + "层");
          }, 100);
        if (sid == 4)
          window.setTimeout(function() {
            alert(
              "土地类型: 粉质粘土, 粉细砂。" + "土地层数：第" + dcnum + "层"
            );
          }, 100);
        if (sid == 5)
          window.setTimeout(function() {
            alert("土地类型: 卵石。" + "土地层数：第" + dcnum + "层");
          }, 100);
        if (sid == 6)
          window.setTimeout(function() {
            alert("土地类型: 圆砾, 砾砂。" + "土地层数：第" + dcnum + "层");
          }, 100);
        if (sid == 7)
          window.setTimeout(function() {
            alert("土地类型: 中粗砂。" + "土地层数：第" + dcnum + "层");
          }, 100);
      } else if (this.INTERSECTED) {
        "this.INTERSECTED." +
          "(" +
          this.material +
          ")" +
          ".color.set(this.intersect_color)";
        this.INTERSECTED = null;
      }
    },
    //将"#FF7F00"转化为0xFF7F00（16744192）
    convertcolor(color) {
      color = color.replace("#", "0x");
      return parseInt(color);
    },
    //查找场景中所有对象，移除其中的点,线对象
    removePoints() {
      this.compotedDistance = 0;
      var allChildren = this.scene.children;
      var numObjects = this.scene.children.length;
      //var lastObject = allChildren[allChildren.length-1];
      for (var i = 0; i < numObjects; i++) {
        var object = allChildren[i];
        if (object instanceof THREE.Points) {
          this.scene.remove(object);
          i--;
        }
      }
    },
    removeLines() {
      this.compotedDistance = 0;
      var allChildren = this.scene.children;
      var numObjects = this.scene.children.length;
      for (var i = 0; i < numObjects; i++) {
        var object = allChildren[i];
        if (object instanceof THREE.Line) {
          this.scene.remove(object);
          i--;
        }
      }
    },
    changeHeight() {
      var score = Math.round(Math.random() * 5) + 5;
      this.$store.dispatch("addfiveScoreByAction", score);
      this.h = document.getElementById("height").value;
      document.getElementById("WebGL-output").innerHTML = "";
      this.init();
    },
    //分层展示
    dcnumData() {
      var score = Math.round(Math.random() * 5) + 5;
      this.$store.dispatch("addsixScoreByAction", score);
      this.form = document.getElementById("dcnumForm").value;
      this.to = document.getElementById("dcnumTo").value;
      //在运行函数init()之前，必须先清空id为WebGL-output的div;
      document.getElementById("WebGL-output").innerHTML = "";
      document.getElementById("sid1").checked = true;
      document.getElementById("sid2").checked = true;
      document.getElementById("sid3").checked = true;
      document.getElementById("sid4").checked = true;
      document.getElementById("sid5").checked = true;
      document.getElementById("sid6").checked = true;
      document.getElementById("sid7").checked = true;

      let param = new URLSearchParams();
      param.append("dcform", this.form);
      param.append("dcto", this.to);

      this.$axios
        .post(
          "http://192.168.3.165:3102/dcvir/getDataByDcnum",
          param,
          {
            emulateJSON: true
          },
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(res => {
          this.gtpoints = res.data;
          this.init();
        })
        .catch(console.log);
    },
    //分类展示
    dctypeData() {
      var score = Math.round(Math.random() * 5) + 5;
      this.$store.dispatch("addsevenScoreByAction", score);
      var sid1 = 1;
      var sid2 = 2;
      var sid3 = 3;
      var sid4 = 4;
      var sid5 = 5;
      var sid6 = 6;
      var sid7 = 7;
      if (document.getElementById("sid1").checked != true) {
        sid1 = 0;
      }
      if (document.getElementById("sid2").checked != true) {
        sid2 = 0;
      }
      if (document.getElementById("sid3").checked != true) {
        sid3 = 0;
      }
      if (document.getElementById("sid4").checked != true) {
        sid4 = 0;
      }
      if (document.getElementById("sid5").checked != true) {
        sid5 = 0;
      }
      if (document.getElementById("sid6").checked != true) {
        sid6 = 0;
      }
      if (document.getElementById("sid7").checked != true) {
        sid7 = 0;
      }

      document.getElementById("WebGL-output").innerHTML = "";

      document.getElementById("dcnumForm").value = 1;
      document.getElementById("dcnumTo").value = 22;

      let param = new URLSearchParams();
      param.append("sid1", sid1);
      param.append("sid2", sid2);
      param.append("sid3", sid3);
      param.append("sid4", sid4);
      param.append("sid5", sid5);
      param.append("sid6", sid6);
      param.append("sid7", sid7);
      this.$axios
        .post(
          "http://192.168.3.165:3102/dcvir/getDataBySoil",
          param,
          {
            emulateJSON: true
          },
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(res => {
          this.gtpoints = res.data;
          this.init();
        })
        .catch(console.log);
    },
    //岩性着色
    colorChange() {
      this.color1 = this.convertcolor(document.getElementById("color-1").value);
      this.color2 = this.convertcolor(document.getElementById("color-2").value);
      this.color3 = this.convertcolor(document.getElementById("color-3").value);
      this.color4 = this.convertcolor(document.getElementById("color-4").value);
      this.color5 = this.convertcolor(document.getElementById("color-5").value);
      this.color6 = this.convertcolor(document.getElementById("color-6").value);
      this.color7 = this.convertcolor(document.getElementById("color-7").value);
      //在运行函数init()之前，必须先清空id为WebGL-output的div;
      document.getElementById("WebGL-output").innerHTML = "";
      this.init();
    },
    //岩性查询
    soilQuery() {
      var score = Math.round(Math.random() * 5) + 5;
      console.log(score);
      this.$store.dispatch("addeightScoreByAction", score);
      this.distance();

      let container = document.getElementById("WebGL-output");
      container.addEventListener("click", this.onMouseClick, false);
      //模拟点击关闭空间距离量算
      document.getElementById("shut-distance").click();
    },
    stopQuery() {
      let container = document.getElementById("WebGL-output");
      this.intersect_color = new THREE.Color();
      "this.INTERSECTED." +
        "(" +
        this.material +
        ")" +
        ".color.set(this.intersect_color)";
      container.removeEventListener("click", this.onMouseClick);
    },
    distance() {
      this.stopQuery();
      var score = Math.round(Math.random() * 5) + 5;
      this.$store.dispatch("addnineScoreByAction", score);
      let container = document.getElementById("WebGL-output");
      container.addEventListener("mousedown", this.onMouseDown, false);
      container.addEventListener("mousemove", this.onMouseMove, false);
      container.style.cursor = "crosshair";
      document.getElementById("distance-show").innerHTML = "为 0 米";
    },
    //鼠标按下事件
    onMouseDown(event) {
      event.preventDefault();
      let container = document.getElementById("WebGL-output");
      var x =
        (event.clientX - container.getBoundingClientRect().left) /
          container.offsetWidth *
          2 -
        1;
      var y =
        -(
          (event.clientY - container.getBoundingClientRect().top) /
          container.offsetHeight
        ) *
          2 +
        1;
      var standardVector = new THREE.Vector3(x, y, 1);
      var worldVector = standardVector.unproject(this.camera);
      var ray = worldVector.sub(this.camera.position).normalize();
      var rayCaster = new THREE.Raycaster(this.camera.position, ray);
      var intersects = rayCaster.intersectObjects(this.scene.children, true);
      if (intersects.length > 0) {
        //若点击的是鼠标左键
        if (event.button == 0) {
          //创建点（Points）
          var pointsGeometry = new THREE.Geometry();
          pointsGeometry.vertices.push(intersects[0].point); // var point = new THREE.Vector3(intersects[0].point.x,intersects[0].point.y,intersects[0].point.z);
          var pointsMaterial = new THREE.PointsMaterial({
            color: 0x0a0a0a,
            size: 20
          });
          var points = new THREE.Points(pointsGeometry, pointsMaterial);

          this.pointsArray.push(points);
          //创建线段
          var lineGeometry = new THREE.Geometry();
          var lineMaterial = new THREE.LineBasicMaterial({
            color: 0xff0000,
            linewidth: 15
          });
          if (this.pointsArray.length >= 2) {
            lineGeometry.vertices.push(
              this.pointsArray[0].geometry.vertices[0],
              this.pointsArray[1].geometry.vertices[0]
            );
            var line = new THREE.Line(lineGeometry, lineMaterial);
            //空间距离量算显示
            var two_points_dis = this.compute_distance(
              this.pointsArray[0].geometry.vertices[0],
              this.pointsArray[1].geometry.vertices[0]
            );
            this.compotedDistance = parseInt(two_points_dis);
            this.toTalDistance += this.compotedDistance;
            document.getElementById("distance-show").innerHTML =
              "为" + this.toTalDistance + "米";
            //把数组的第一个元素从其中删除，并返回第一个元素的值
            this.pointsArray.shift();
            this.scene.add(line);
          }
          this.scene.add(points);
        }
        //鼠标右键按下时，回退到上一步的点，并中断绘制
        if (event.button == 2) {
          this.toTalDistance = 0;
          //鼠标左键未点击时线段的移动状态
          if (this.scene.getObjectByName("line_move")) {
            this.scene.remove(this.scene.getObjectByName("line_move"));
            //删除数组中的元素，否则的话再次重绘会链接之前的点接着重绘
            this.pointsArray.shift();
          }
        }
      }
    },
    //鼠标移动事件
    onMouseMove(event) {
      event.preventDefault();
      let container = document.getElementById("WebGL-output");
      var x =
        (event.clientX - container.getBoundingClientRect().left) /
          container.offsetWidth *
          2 -
        1;
      var y =
        -(
          (event.clientY - container.getBoundingClientRect().top) /
          container.offsetHeight
        ) *
          2 +
        1;
      var standardVector = new THREE.Vector3(x, y, 1);
      var worldVector = standardVector.unproject(this.camera);
      var ray = worldVector.sub(this.camera.position).normalize();
      var rayCaster = new THREE.Raycaster(this.camera.position, ray);
      var intersects = rayCaster.intersectObjects(this.scene.children, true);
      if (intersects.length > 0) {
        //鼠标左键未点击时线段的移动状态
        if (this.scene.getObjectByName("line_move")) {
          this.scene.remove(this.scene.getObjectByName("line_move"));
        }
        //创建线段
        var lineGeometry = new THREE.Geometry();
        var lineMaterial = new THREE.LineBasicMaterial({
          color: 0xff0000,
          linewidth: 15
        });
        if (this.pointsArray.length > 0) {
          lineGeometry.vertices.push(this.pointsArray[0].geometry.vertices[0]);
          var mouseVector3 = new THREE.Vector3(
            intersects[0].point.x,
            intersects[0].point.y,
            intersects[0].point.z
          );
          lineGeometry.vertices.push(mouseVector3);
          var line = new THREE.Line(lineGeometry, lineMaterial);
          line.name = "line_move";
          this.scene.add(line);
        }
      }
    },
    compute_distance(p1, p2) {
      var dx = Math.abs(p1.x - p2.x);
      var dy = Math.abs(p1.y - p2.y);
      var dz = Math.abs(p1.z - p2.z);
      var dis = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2) + Math.pow(dz, 2));
      return Math.round(dis); //四舍五入
    },
    shutDistance() {
      let container = document.getElementById("WebGL-output");
      container.removeEventListener("mousedown", this.onMouseDown);
      container.removeEventListener("mousemove", this.onMouseMove);
      this.removePoints();
      this.removeLines();
      container.style.cursor = "default";
      document.getElementById("distance-show").innerHTML = "为 0 米";
      this.pointsArray = [];
    },
    previous() {
      this.$router.go(-1);
    },
    nextStep() {
      this.$router.push({ name: "layercut" });
    }
  },
  created() {
    this.loading = true;
    this.$axios
      .post("http://192.168.3.165:3102/dcvir/getData")
      .then(res => {
        this.loading = false;
        this.gtpoints = res.data;
        this.init();
        Notification.success({
          message: "模型加载完成!",
          duration: 2000,
          position: "bottom-right"
        });
      })
      .catch(console.log);
  }
};
</script>
<style lang="less" scoped>
.gtp {
  margin: 30px 0 15px 0;
  .c_top {
    padding: 0 0 0 20px;
    display: flex;
    justify-content: space-between;
    .left-nav {
      width: 220px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #eaeaea;
      height: 800px;
      overflow-y: scroll;
      .optionShow {
        width: 100%;
        height: 35px;
        border-bottom: 1px dashed #eaeaea;
        .color {
          color: #333;
        }
        #optionShow {
          width: 100%;
          text-align: left;
          padding: 0;
          padding-left: 5px;
          line-height: 35px;
        }
      }
      #change-height {
        width: 100%;
        border: 1px solid #409eff;
        color: #409eff;
      }
      .lithology {
        margin-top: 15px;
        label {
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          height: 35px;
          margin-bottom: 15px;
          line-height: 35px;
          input {
            line-height: 21px;
            width: 32%;
            height: 35px;
            padding: 5px;
            -webkit-user-select: text;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 3px;
            outline: 0;
            background-color: #fff;
            -webkit-appearance: none;
          }
        }
        #color-change {
          width: 100%;
          border: 1px solid #409eff;
          color: #409eff;
        }
      }
      .fenCeng {
        width: 100%;
        .chance {
          font-size: 14px;
          margin-top: 15px;
          line-height: 59px;
          display: flex;
          justify-content: space-between;
          select {
            width: 45px;
            text-align: center;
            padding: 10px;
            border: 1px solid #eaeaea !important;
            background-color: #fff;
          }
        }
        #dcnum-data {
          width: 100% !important;
          border: 1px solid #409eff;
          color: #409eff;
        }
      }
      .fenlei {
        font-size: 14px;
        label {
          display: block;
          padding-left: 20px;
          height: 35px;
          line-height: 35px;
          input {
            margin-right: 10px;
          }
        }
        #dctype-data {
          width: 100% !important;
          border: 1px solid #409eff;
          color: #409eff;
        }
      }
    }
    .webgl {
      height: 800px;
      width: 84%;
    }
  }
  .guid {
    width: 100%;
    .guidBar {
      display: flex;
      justify-content: space-between;
      width: 250px;
      height: 40px;
      margin: 15px auto 0;
    }
  }
}
</style>

